<template>
	<div>
		<el-row :gutter="24">
			<!--<el-col :span="6"
				        style="padding-right: 5px!important;padding-left: 15px!important">
					<el-input size="small"
					          v-model="dictTreeSearchValue"
					          placeholder="请输入内容"
					          icon="search"
					          @click="searchTree"></el-input>
				</el-col>-->
			<!--<el-col :span="1"
				        style="margin-right:10px;">
					<p class="queryLabel">字典状态:</p>
				</el-col>
				<el-col :span="3">
	
					<el-select v-model="dictStatus"
					           size='small'
					           clearable>
						<el-option label="已停用"
						           value="0">
						</el-option>
						<el-option label="已启用"
						           value="1">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="1">
					<el-button type="primary"
					           size="small"
					           v-on:click='queryParamGrid'>查询</el-button>
				</el-col>-->
			<!--<el-col :span="5"
				        style="font-size:20px">
					当前分类：{{this.$data.curentPName}}
				</el-col>-->
			<el-col :span="24" style="text-align: right;">
				<el-button type="primary" size="small" v-on:click='add'>新增</el-button>
				<el-button type="primary" size="small" @click.native.prevent="edit()">编辑</el-button>
				<el-button type="primary" size="small" @click.native.prevent="start()">启用</el-button>
				<el-button type="primary" size="small" @click.native.prevent="stop()">停用</el-button>
	
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<!-- 参数树 -->
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramTreeData" :filter-node-method="filterNode" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
			</el-col>
			<el-col :span="18" style="padding-right: 0px!important;padding-left: 0px!important;">
				<el-table border stripe :data="params.dataList" style="width:100%" @selection-change="handleSelectionChange" height=460>
					<el-table-column type="selection" width="60" fixed>
					</el-table-column>
					<el-table-column prop="tagName" label="字典显示值" width="180">
					</el-table-column>
					<el-table-column prop="tagCode" label="字典存储值" width="180">
					</el-table-column>
					<el-table-column prop="pTagCode" label="分组" width="200">
					</el-table-column>
					<el-table-column prop="tagType" label="类型" :formatter="valueCov">
					</el-table-column>
					<el-table-column prop="dispOrder" label="优先级">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="statusCov">
					</el-table-column>
				</el-table>
	
				<el-pagination small @size-change="handleCurrentChange" @current-change="handleGroupCurrentChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="params.total">
				</el-pagination>
			</el-col>
		</el-row>
		<!--字典表单 -->
		<el-dialog title="字典信息" v-model="dictFormShow">
			<el-form :model="dictFormData" ref="dictForm" :rules="dictRule" label-width="100px">
				<el-form-item label="上级名称" prop="pTagName">
					<el-input size="small" v-model="dictFormData.pTagName" readonly></el-input>
				</el-form-item>
	
				<el-form-item label="标签显示值" prop="tagName" required>
					<el-input size="small" placeholder="" v-model="dictFormData.tagName">
					</el-input>
				</el-form-item>
				<el-form-item label="标签存储值" prop="tagCode" required>
					<el-input size="small" placeholder="" v-model="dictFormData.tagCode">
					</el-input>
				</el-form-item>
				<el-form-item label="标签类型" prop="tagType" required>
					<el-select size="small" v-model="dictFormData.tagType" style="margin-left: -2px;" placeholder="请选择">
						<el-option label="标签组" value="0"></el-option>
						<el-option label="标签项" value="1" selected></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优先级:" prop="dispOrder">
					<el-input-number v-model="dictFormData.dispOrder" :min="1" :max="999"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dictFormShow = false">取 消</el-button>
				<el-button type="primary" @click="saveDict">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data: function () {
		return {
			//上级的上级属性
			ppTagCode: '',
			//分页设置
			page: this.page,
			//当前分组页
			curPage: 1,
			params: {
				dataList: [],
				total: 0
			},
			//查询条件-状态
			dictStatus: '',
			//字典树的过滤条件
			dictTreeSearchValue: '',

			//树型数据配置
			defaultProps: {
				children: 'child',
				label: 'tagName'
			},

			//树型数据
			paramTreeData: [],
			//默认选中的上级节点
			curentPCode: "-1",
			curentPName: "",

			//子菜单表格数据
			paramTabelData: [],
			//子系统下级
			sysChild: [],
			//模块下级
			moduleChild: [],
			//功能下级
			funcChild: [],
			//资源类型下拉数据
			resTypeComboData: [],
			//资源表单是否显示
			paraFormShow: false,

			//定义空数组，来判断 单选 选中哪一个
			multipleSelection: [],

			//字典表单
			dictFormShow: false,
			dictEmptyData: {
				pTagCode: "",
				pTagName: '',
				tagName: "",
				tagCode: "",
				tagType: "",
				dispOrder: "1",
			},
			//字典数据
			dictFormData: {
				pTagCode: "",
				pTagName: '',
				tagName: "",
				tagCode: "",
				tagType: "",
				dispOrder: "1",
			},
			//校验规则
			dictRule: {
				tagName: [{
					required: true,
					message: '请输入名称',
					trigger: 'blur'
				}],
				tagCode: [{
					required: true,
					message: '请输入父级编码',
					trigger: 'blur'
				}],
				tagType: [{
					required: true,
					message: '请输入编码',
					trigger: 'blur'
				}]

			},

		}
	},
	methods: {
		//分页查询
		handleCurrentChange: function () { },
		//字典分组,当前页切换
		handleGroupCurrentChange: function (currentPage) {
			this.$data.curPage = currentPage;
			this.queryParamGrid();
		},
		//查询树节点
		searchTree: function () {
			if (this.$data.dictTreeSearchValue == "") {
				this.$message("请输入查询条件");
				this.queryParamTree();
				return;
			}
			this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
		},
		//点击资源树节点
		handleNodeClick(data) {

			this.$data.curentPCode = data.tagCode;
			this.$data.curentPName = data.tagName;
			this.$data.dictEmptyData.pTagCode = data.tagCode;
			this.$data.dictEmptyData.pTagName = data.tagName;
			this.$data.ppTagCode = data.pTagCode;
			this.queryParamGrid();
		},
		//复选框回调函数
		handleSelectionChange: function (val) {

			this.$data.multipleSelection = val;
			//this.reminderDelte();
		},
		reminderDelte: function () {

			if (this.$data.multipleSelection.length == 1) {
				this.openRemind(this.$data.multipleSelection[0].id)
			} else {
				this.$message.error("请选择一条数据")
			}

		},

		//查询资源列表
		queryParamGrid: function () {

			this.$http.get(this.API_ROOT + '/crm/tag/page', {
				params: {
					status: this.$data.dictStatus,
					tagCode: this.$data.curentPCode,
					start: this.$data.curPage,
					limit: this.$data.page.pageSize
				}
			}).then((response) => {

				this.$data.params.total = Number(response.data.total);
				this.$data.params.dataList = response.data.dataList; //Object.assign(this.$data. paramTabelData, response.data.dataList);
			}, (response) => { });
		},

		//启用资源
		start: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/tag/start',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.queryParamGrid();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//停用资源
		stop: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/tag/stop',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.queryParamGrid();
				}, function (error) { })
			} else {
				this.$message.error("请选择一条数据")
			}

		},

		//新增
		add: function () {
			//
			this.$data.dictFormData = Object.assign(this.$data.dictFormData, this.$data.dictEmptyData);
			this.$data.dictFormData.pCode = this.$data.curentPCode;
			this.$data.dictFormShow = true;
		},
		//编辑
		edit: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http.get(this.API_ROOT + '/crm/tag/info', {
					params: {
						id: data,
					}
				}).then(function (resp) {
					// success callback
					//
					this.$data.dictFormData = Object.assign(this.$data.dictFormData, resp.data);
					this.$data.dictFormData.pTagName = this.$data.dictEmptyData.pTagName;
					this.$data.dictFormShow = true;
				}, function (error) { })
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//保存参数
		saveDict: function (index) {

			this.$refs.dictForm.validate(function (valid) {
				if (valid) {
					if (this.$data.ppTagCode == -1 || this.$data.ppTagCode == '') {
						this.$http.post(this.API_ROOT + '/crm/tag/save', this.$data.dictFormData)
							.then(resp => {
								if (resp.data.success) {
									this.queryParamTree();
									this.queryParamGrid();
									this.$data.dictFormShow = false;
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					} else if (this.$data.ppTagCode != -1 && this.$data.dictFormData.tagType == 1) {
						this.$http.post(this.API_ROOT + '/crm/tag/save', this.$data.dictFormData)
							.then(resp => {
								if (resp.data.success) {
									this.queryParamTree();
									this.queryParamGrid();
									this.$data.dictFormShow = false;
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					} else {
						this.$message.error("只能增加两层分组！");
					}

				}
				return false;
			}.bind(this));
		},
		//状态转换
		statusCov: function (row, column) {
			return row.status == 1 || row.status == "1" ? "已启用" : "已停用";
		},

		//资源类型转换
		valueCov: function (row, column) {
			if (row.tagType == null || row.tagType == "") {
				return "";
			}
			return (row.tagType == "0" || row.tagType == 0) ? "标签组" : "标签项";
		},

		queryTree: function () {
			this.$http.get(this.API_ROOT + '/rbac/res/resTree', {}).then((response) => {
				this.$data.paramTreeData = response.data.data;
			}, (response) => { });
		},
		//资源过滤
		filterNode: function (value, data, node) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		//查询参数树
		queryParamTree: function () {
			//获取资源树
			this.$http.get(this.API_ROOT + '/crm/tag/leftTree', {}).then((response) => {
				this.$data.paramTreeData = response.data.data;
			}, (response) => { });
		},

	},
	//组件创建时
	created: function () {
		//查询参数树
		this.$http.get(this.API_ROOT + '/crm/tag/leftTree').then((response) => {

			this.$data.paramTreeData = response.data.data;
			this.$data.dictEmptyData.pTagName = '';
			this.$data.dictEmptyData.pTagCode = -1;
		}, (response) => { });
	}

};
</script>
<style>

</style>